<template>
  <div class="payment-result-container">
    <!-- 成功图标 -->
    <div class="success-icon">
      <image src="/static/logo.png" mode="aspectFit"></image>
    </div>
    
    <!-- 支付状态 -->
    <div class="payment-status">支付成功</div>
    
    <!-- 支付金额 -->
    <div class="payment-amount">998.00</div>
    
    <!-- 预约编号 -->
    <div class="order-info">
      <text class="label">预约编号：</text>
      <text class="value">324252536363634</text>
    </div>
    
    <!-- 按钮区域 -->
    <div class="button-area">
      <button class="primary-button" @click="goToHome">返回首页</button>
      <button class="secondary-button" @click="viewOrderDetail">订单详情</button>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  methods: {
    // 返回首页
    goToHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    
    // 查看订单详情
    viewOrderDetail() {
      uni.navigateTo({
        url: '../orderDetail/orderDetail'
      });
    }
  },
  
  // 页面周期函数--监听页面加载
  onLoad() {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {
  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
  }
}
</script>

<style scoped>
.payment-result-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 40rpx;
  min-height: 100vh;
  background-color: #fff;
}

/* 成功图标 */
.success-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon image {
  width: 100%;
  height: 100%;
}

/* 支付状态 */
.payment-status {
  font-size: 44rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
}

/* 支付金额 */
.payment-amount {
  font-size: 64rpx;
  font-weight: 700;
  color: #333;
  margin-bottom: 60rpx;
}

/* 预约编号 */
.order-info {
  margin-bottom: 120rpx;
  font-size: 32rpx;
  color: #666;
}

.order-info .label {
  color: #999;
}

.order-info .value {
  color: #666;
  font-weight: 500;
}

/* 按钮区域 */
.button-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30rpx;
}

.primary-button,
.secondary-button {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  font-size: 36rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.primary-button {
  background-color: #1989fa;
  color: #fff;
}

.secondary-button {
  background-color: #f5f5f5;
  color: #666;
}

/* 确保按钮在不同尺寸下都有良好的显示效果 */
@media screen and (min-width: 768px) {
  .button-area {
    max-width: 600rpx;
  }
}
</style>